
.sidebar-item {
  display: block;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  user-select: none;
  padding: var(--sidebar-padding, $sidebar-padding);
  font-size: var(--sidebar-font-size, $sidebar-font-size);
  line-height: var(--sidebar-line-height, $sidebar-line-height);
  color: var(--sidebar-text-color, $sidebar-text-color);
  background-color: var(--sidebar-background-color, $sidebar-background-color);

  &__text {
    position: relative;
    display: inline-block;
    text-align: center;
    word-break: break-all;
  }

  &--hover {
    background-color: var(--sidebar-active-color, $sidebar-active-color);
  }

  &::after {
    border-bottom-width: 1px;
  }

  &--selected {
    color: var(--sidebar-selected-text-color, $sidebar-selected-text-color);
    font-weight: var(
      --sidebar-selected-font-weight,
      $sidebar-selected-font-weight
    );
    // border-color: var(
    //   --sidebar-selected-border-color,
    //   $sidebar-selected-border-color
    // );
    &::after{
      display: block;
      position: absolute;
      top:0;
      left: 0;
      transform:translateY(40%) ;
      content: "";
      height: 60%;
      width: 6rpx;
      // border-left: 3px solid transparent;
      background-color: var(
        --sidebar-selected-border-color,
        $sidebar-selected-border-color
      );
      border-radius: 3rpx;
      overflow: hidden;
    }
  }

  &--selected,
  &--selected &--hover {
    background-color: var(
      --sidebar-selected-background-color,
      $sidebar-selected-background-color
    );
  }

  &--disabled {
    color: var(--sidebar-disabled-text-color, $sidebar-disabled-text-color);
  }
}
